import React, { Component, PureComponent } from 'react';
import { StyleSheet, Text, View, DeviceEventEmitter } from 'react-native';
import { Provider, Toast, Button } from '@ant-design/react-native';
import * as Font from 'expo-font';
import styles from 'src/styles';

const TOAST_DUR = 2; // seconds
function ToastDemo({ navigation }) {
  const [loaded] = Font.useFonts({
    antoutline: require('./antoutline.ttf'),
  });
  
  if (!loaded) {
    return null;
  }

  return (
    <Provider>
      <View style={styles.container}>
        <Text style={{ fontFamily: 'antoutline', fontSize: 30 }}>Ant Outline</Text>
        <Button onPress={() => {
          Toast.info('Toast Shown', TOAST_DUR, () => { console.log('toast done'); }, true);
        }}>Toast Info</Button>
        <Button onPress={() => {
          Toast.success('Toast success', TOAST_DUR, () => { console.log('toast done'); }, true);
        }}>Toast success</Button>
        <Button onPress={() => {
          Toast.fail('Toast fail', TOAST_DUR, () => { console.log('toast done'); }, true);
        }}>Toast fail</Button>
        <Button onPress={() => {
          Toast.offline('Toast offline', TOAST_DUR, () => { console.log('toast done'); }, true);
        }}>Toast offline</Button>
      </View>
    </Provider>
  )
}

export default ToastDemo;
